<template>
  <div v-if="isDefaultSlots || value || value === 0" class="info-module">
    <div class="label">
      <div class="label__left">
        {{ label }}
      </div>
      <div v-if="hasCopy" title="复制" class="label__right iconfont icon-file-copy-line" @click="handleCopyText(value as string)"></div>
    </div>
    <slot>
      <div class="value-wrap" :class="[`elliptical-${elliptical}`]" :title="String(value)">
        {{ value }}
      </div>
    </slot>
  </div>
</template>

<script lang="ts" setup>
  import { message } from 'ant-design-vue'
  import { ref } from 'vue'

  import { copyText } from '@/utils'

  export interface Props {
    label: string
    value?: string | number
    hasCopy?: boolean
    // 省略行数
    elliptical?: number
  }

  withDefaults(defineProps<Props>(), {
    value: '',
    hasCopy: false,
    elliptical: 1
  })

  // 获取插槽内容
  const isDefaultSlots = ref(false)
  const slots = defineSlots()
  // 判断插槽是否存在
  if (slots.default) {
    isDefaultSlots.value = true
  }

  const handleCopyText = async (text: string) => {
    if (!text) {
      return
    }
    if (navigator.clipboard) {
      await window.navigator.clipboard.writeText(String(text))
    } else {
      copyText(text)
    }

    message.success('复制成功')
  }
</script>

<style lang="less" scoped>
  .info-module {
    .label {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .label__left {
        font-size: 14px;
        color: rgba(21, 23, 27, 0.95);
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
      }

      .label__right {
        font-size: 14px;
        color: rgba(175, 175, 175, 1);
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        cursor: pointer;
      }
    }

    .value-wrap {
      padding: 8px 12px;
      margin-top: 8px;
      width: 100%;
      min-height: 38px;
      font-size: 14px;
      color: rgba(21, 23, 27, 0.95);
      background: #f7f8fa;
      border-radius: 10px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px;
    }
  }
</style>
